<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出货站报表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.7/css/layui.css">
    <style>
        /* 全局样式 */
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
        .sidebar {
            width: 250px; /* 设置固定宽度 */
            height: 100%; /* 让导航栏铺满屏幕高度 */
            position: fixed; /* 让导航栏固定在屏幕上 */
            top: 0; /* 距离屏幕顶部距离 */
            left: 0; /* 距离屏幕左侧距离 */
            overflow-y: auto; /* 如果导航栏高度大于屏幕高度，允许滚动 */
            background-color: #f0f0f0; /* 添加背景颜色 */
        }

        /* 页面内容样式 */
        .main-content {
            margin-left: 250px; /* 留出导航栏的宽度 */
            padding: 20px;
        }

        /* 在小屏幕下，调整页面布局 */
        @media (max-width: 768px) {
            .sidebar {
                width: 100%; /* 导航栏铺满整个屏幕宽度 */
                position: static; /* 取消固定定位 */
                overflow-y: visible; /* 不允许滚动 */
            }
            .main-content {
                margin-left: 0; /* 取消左边距 */
            }
        }
    </style>
</head>
<body>
<!-- 包含头部和导航栏 -->
<div th:replace="twoGroup/twoGroup.html"></div>

<div class="layui-container">
    <h1 class="layui-header">出货站报表</h1>
    <div id="reportContent">
        <input type="text" id="searchInput" placeholder="请输入关键词进行搜索">
        <button onclick="searchReports()">搜索</button>
        <a th:href="@{/export/stock_out_report}" class="layui-btn">导出Excel</a>

        <table class="layui-table">
            <thead>
            <tr>
                <th>序号</th>
                <th>站点名称</th>
                <th>货物名称</th>
                <th>数量</th>
                <th>总金额</th>
                <th>报表日期</th>
            </tr>
            </thead>
            <tbody>
            <!-- 使用 Thymeleaf 遍历显示数据 -->
            <tr th:each="report : ${stockOutReports}">
                <td th:text="${report.id}"></td>
                <td th:text="${report.stationName}"></td>
                <td th:text="${report.goodsName}"></td>
                <td th:text="${report.quantity}"></td>
                <td th:text="${report.totalAmount}"></td>
                <td th:text="${#dates.format(report.reportDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.9.7/layui.js"></script>
<script>
    function searchReports() {
        var keyword = $('#searchInput').val();
        window.location.href = '/search/stock_out_report?keyword=' + keyword;
    }
</script>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</body>
</html>
